<template>
	<h3>GetterDemo</h3>
	{{ doneTodosCount }}
	{{ $store.getters.doneTodosCount }}
	<hr />
	{{ doneTodos }}
	<br />
	{{ getTodoById(2) }}
	<hr />
	{{ doneCount }}
</template>

<script>
	import { mapGetters } from "vuex";

	export default {
		computed: {
			doneTodosCount() {
				// return this.$store.state.todos.filter((todo) => todo.done).length;
				return this.$store.getters.doneTodosCount;
			},
			// 使用对象展开运算符将 getter 混入 computed 对象中
			...mapGetters(["doneTodos", "getTodoById"]),
			...mapGetters({
				// 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
				doneCount: "doneTodosCount",
			}),
		},
		created() {
			console.log("store.getters.doneTodos", this.$store.getters.doneTodos);
			console.log(
				"store.getters.getTodoById(2)",
				this.$store.getters.getTodoById(2)
			);
		},
	};
</script>

<style>
</style>